<template>
	<view>
		<z-nav-bar :title="data.data.dictLabel"></z-nav-bar>
		<view class="cp-top">
			<view class="cp-top-tit flex_fsc">
				<text>{{ $gc.evaluationType[data.type] }}</text>
				<text class="lab">{{ data.data.dictLabel }}</text>
			</view>
			<view v-if="data.target" class="uni-mt-16 flex_fsc">
				<view>目标距离：</view>
				<view>
					{{
						data.target.value
							? data.target.children[data.target.value].dictLabel
							: data.target.children[0].dictLabel
					}}
				</view>
				<view class="change-target" @click="changeTarget">修改目标距离</view>
			</view>
			<view class="cp-gz">{{ data.data.remark }}</view>
			<view class="cp-ht">&nbsp;</view>
			<view class="cp-score-tit">详细成绩</view>
			<view class="cp-score-select flex_fsc">
				<text
					v-for="(num, index) in numberList"
					:key="num"
					:class="{ select: numberIndex === index }"
					@click="
						numberIndex = index;
						resetButton();
					"
				>
					第{{ num }}球
				</text>
			</view>
			<uni-table ref="table" border stripe emptyText="暂无更多数据">
				<uni-tr class="uni-color-main-bg">
					<uni-th align="center" width="260rpx">
						<view class="z-font-24 uni-white">评测项目</view>
					</uni-th>
					<uni-th align="center">
						<view class="uni-white">值</view>
					</uni-th>
					<uni-th align="center" width="130rpx">
						<view class="uni-white">评分</view>
					</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in data.list" :key="item.id">
					<uni-td align="center" class="z-font-24">{{ item.dictLabel }}</uni-td>
					<uni-td align="center">
						<view v-if="item.children[0].dictLabel !== '最后评星'">
							<view
								v-if="item.children[0].hasChildren"
								@click="openSliderBox(index, 0)"
								class="z-font-24"
							>
								<text>
									{{
										typeof item[`value${numberIndex}`] === 'number'
											? item.children[0].children[item[`value${numberIndex}`]].dictLabel
											: '选择'
									}}
								</text>
								<image :src="setting.oss_pub_domain + '/app-img/icon/icon_drop-down.png'" class="cp-scroe-more"></image>
							</view>
							<view v-else class="z-font-24 flex_cc" @click="openSliderBox(index, 1)">
								<view class="select-number">
									{{ item[`value${numberIndex}`] }}
								</view>
								<view>
									{{
										item.children[0].cssClass == '2'
											? item.children[0].dictExtT
											: item.children[0].cssClass == '3'
											? item.children[0].dictExtF
											: ''
									}}
								</view>
							</view>
						</view>
						<view v-else>--</view>
					</uni-td>
					<uni-td align="center">
						<uni-rate
							allow-half
							size="12"
							v-model="item[`markValue${numberIndex}`]"
							color="#E1E3E6"
							active-color="#FF7742"
						/>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<z-slider
			ref="sliderZdd"
			:value="componentData.value"
			:startEnd="componentData.data"
			@change="setItem"
		></z-slider>
		<select-item
			ref="selectItemModule"
			:value="componentData.value"
			:data="componentData.data"
			@change="setItem"
		></select-item>
		<bottom-box :buts="buts" @change="butChange"></bottom-box>
	</view>

	<uni-popup ref="inputPopup" type="bottom">
		<view class="top-box flex_sbc">
			<view class="uni-585C66" @click="inputPopup.close()">取消</view>
			<view class="z-font-32">{{ data.list[editIndex].dictValue }}</view>
			<view class="uni-color-main" @click="saveData">完成</view>
		</view>
		<view class="popup-content">
			<view class="text-w z-font-32">{{ data.list[editIndex].dictValue }}</view>
			<view class="flex_sbc input-box">
				<input v-model="componentData.value" style="text-align: left; width: 100%" />
				<view class="text-w flex_sh">{{ componentData.data }}</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import dayjs from 'dayjs';
import { submitEvaluation } from '@/api/player.js';
import SelectItem from './select-item';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

const numberList = ['一', '二', '三', '四', '五'],
	numberIndex = ref(0);

const data = reactive(uni.getStorageSync('evaluation-data') || {});
if ([293928, 294015, 294083, 294091].includes(data.id)) {
	data.target = data.list.shift();
	data.data.remark = data.data.remark.replace(
		/设定一个.*的目标/,
		`设定一个${data.target.children[0].dictLabel}的目标`
	);
}
console.log(data);

function submitData() {
	let countMark = 0;
	data.list.forEach((item) => {
		if (!item.children[0].hasChildren) {
			let count = 0;
			numberList.forEach((e, index) => {
				count += parseInt(item[`value${index}`]) || 0;
			});
			item.average = parseInt(count / numberList.length);
		} else {
			const countObj = {};
			numberList.forEach((el, eindex) => {
				if (item[`value${eindex}`] === undefined) return
				countObj[item[`value${eindex}`]] = (countObj[item[`value${eindex}`]] || 0) + 1;
			});
			let maxValue = -1;
			let maxKey = ''
			for (const [key, value] of Object.entries(countObj)) {
				if (value > maxValue) {
					 maxValue = value
					 maxKey = key
				}
			}
			item.maxValue = maxKey
		}
		let mark = 0;
		numberList.forEach((e, index) => {
			mark += (item[`markValue${index}`] || 0) * 2;
		});
		item.markAverage = mark / numberList.length;
		countMark += item.markAverage;
		item.markAverage = parseFloat(item.markAverage.toFixed(1));
	});
	data.score = parseFloat((countMark / data.list.length).toFixed(1));
	data.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
	submitEvaluation({
		evaluationId: data.id,
		result: JSON.stringify(data),
		score: data.score,
		studentId: data.playerInfo.id,
		type: data.type
	}).then((res) => {
		uni.setStorageSync('local-evaluation', data);
		that.tools.alert('提交成功');
		uni.redirectTo({
			url: '/pages/player/evaluation/evaluation-detail/evaluation-detail'
		});
	});
}

// 底部按钮显示控制
const buts = reactive([
	{
		label: '结束测试',
		bgColor: '#E8EFED',
		color: '#008965',
		width: 300,
		type: 'empty'
	},
	{
		label: '下一球',
		bgColor: 'uni-color-main-bg',
		width: 300
	}
]);

function butChange(e) {
	if (e) {
		if (numberIndex.value === 4) {
			submitData();
		} else {
			numberIndex.value += 1;
			resetButton();
		}
	} else {
		if (numberIndex.value) {
			numberIndex.value -= 1;
			resetButton();
		} else {
			submitData();
		}
	}
}

function resetButton() {
	if (numberIndex.value) {
		buts[0] = {
			label: '上一球',
			bgColor: 'uni-color-main-bg',
			width: 300
		};
	} else {
		buts[0] = {
			label: '结束测试',
			bgColor: '#E8EFED',
			color: '#008965',
			width: 300,
			type: 'empty'
		};
	}
	if (numberIndex.value === 4) {
		buts[1] = {
			label: '结束测试',
			bgColor: '#E8EFED',
			color: '#008965',
			width: 300,
			type: 'empty'
		};
	} else {
		buts[1] = {
			label: '下一球',
			bgColor: 'uni-color-main-bg',
			width: 300
		};
	}
}

// 滑动选择
const sliderZdd = ref(''),
	editIndex = ref(0),
	componentData = reactive({
		value: '',
		data: ''
	});

function openSliderBox(index, type) {
	editIndex.value = index;
	const item = data.list[index].children[0];
	componentData.data = item[type ? 'dictExtF' : 'children'];
	componentData.value = data.list[index][`value${numberIndex.value}`];
	that.$nextTick(() => {
		type
			? item.cssClass == '3'
				? inputPopup.value.open()
				: item.cssClass != '7'
				? sliderZdd.value.open()
				: ''
			: selectItemModule.value.open();
	});
}

function changeTarget() {
	editIndex.value = -1;
	componentData.data = data.target.children;
	componentData.value = data.target.value || '';
	that.$nextTick(() => {
		selectItemModule.value.open();
	});
}

function setItem(e) {
	if (editIndex.value === -1) {
		data.target.value = e;
		data.data.remark = data.data.remark.replace(
			/设定一个.*的目标/,
			`设定一个${data.target.children[e].dictLabel}的目标`
		);
	} else {
		data.list[editIndex.value][`value${numberIndex.value}`] = e;
	}
}

const selectItemModule = ref();

const inputPopup = ref('');

function saveData() {
	let index = -1;
	if (data.list[editIndex.value].dictLabel == '距离')
		index = data.list.findIndex((item) => item.dictLabel == '目标偏差');
	data.list[editIndex.value][`value${numberIndex.value}`] = componentData.value;
	if (index >= 0 && data.target) {
		const num = data.target.value
			? data.target.children[data.target.value].dictValue
			: data.target.children[0].dictLabel;
		const poor = num - componentData.value;
		data.list[index][`value${numberIndex.value}`] = poor >= 0 ? poor : 0;
	}
	inputPopup.value.close();
}
</script>

<style lang="scss">
@import 'evaluation-nextDetail.scss';
</style>
